<template>
  <div class="panel">
    <el-row :gutter="20">
      <el-col :span="12">
        柜机名称 : <span>{{ info.name || "" }}</span>
      </el-col>
      <el-col :span="12">
        序列号 :<span> {{ info.serialNumber || "" }}</span>
      </el-col>
      <el-col :span="12">
        上线时间 : <span>{{ info.recycleTime || "" }}</span>
      </el-col>
      <el-col :span="12">
        网络延迟 : <span>{{ plcInfo.delay || "-" }}ms</span>
      </el-col>
      <el-col :span="12">
        锁定状态 : <span> {{ info.lockStatus == 1 ? "未锁定" : "锁定" }}</span>
      </el-col>
      <el-col :span="12">
        串口状态 : <span>{{ plcInfo.serialPortStatus == 1 ? "正常" : "异常" }}</span>
      </el-col>
      <!-- <el-col :span="12">
        DVP内核状态 : <span>{{ info.authorize == 1 ? "正常" : "异常" }}</span>
      </el-col> -->
      <el-col :span="12">
        客户端状态 : <span>{{ info.authorize == 1 ? "正常" : "异常" }}</span>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "Status-panel",
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 网络延迟
    plcInfo: {
      type: Object,
      default: () => {
        return {};
      },
    }
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.panel {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #72b5f8;
  box-shadow: inset 0 0 10px rgba(64, 160, 255, 0.2);
  border-radius: 10px;
  padding: 10px;
  font-size: 14px;
  .el-col {
    padding: 10px 0;
  }
  span {
    color: #1879da;
  }
}
</style>
